<template>
	<div class="navigationBar">
		<div class="maxWidthNav">
			<div class="nav-top">
				<div class="navTopContainer">
					<div @click="dragDialogShow = true" class="link chatRoomButton"><i class="iconfont icon-icon_chat_room"></i><span>聊天室</span></div>
					<!-- 未登录 -->
					<div class="loginBox" v-if="isLogin">
						<el-button class="login" @click="dialogLogin = true">登录</el-button>
						<el-button class="register" @click="dialogRegist = true">登记</el-button>
						<el-button class="guest">试试看</el-button>
					</div>
					<!-- 登录后 -->
					<div class="navTools" v-else>
						<div class="right">
							<div class="quickLink">
								<ul>
									<li>
										<router-link to="/user/message" class="link message"><i class="iconfont icon-icon_message_centre"></i><span>信息</span>
										</router-link>
									</li>
									<li>
										<router-link to="/user/betHistory" class="link betHistory"><i class="iconfont icon-icon_vote_record"></i><span>投注历史</span>
										</router-link>
									</li>
									<li>
										<router-link to="/" class="link charge"><i class="iconfont"></i><span>充值</span>
										</router-link>
									</li>
									<li>
										<router-link to="/" class="link draw"><i class="iconfont"></i><span>提款</span>
										</router-link>
									</li>
								</ul>
							</div>
							<div class="accountMenu">
								<el-menu mode="horizontal" class="el-menu-demo">
									<el-submenu index="2" popper-class="sun-class">
										<template slot="title">
											<div class="accountInfo">
												<p>小宝</p>
												<p>99,541,000 韩元<span class="el-icon-arrow-down"></span></p>
											</div>
											<span class="avatar el-avatar el-avatar--circle">
												<img src="../assets/img/touxiang.png" style="object-fit: cover;">
											</span>
											<i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
										</template>
										<el-menu-item index="1"><span class="name">个人信息</span><span class="icon"><i
													class="iconfont icon-icon_personal_data"></i></span></el-menu-item>
										<el-menu-item index="2"><span class="name">货币基金</span><span class="icon"><i
													class="iconfont icon-icon_top_up_record"></i></span></el-menu-item>
										<el-menu-item index="3"><span class="name">历史</span><span class="icon"><i
													class="iconfont icon-icon_vote_record"></i></span></el-menu-item>
										<el-menu-item index="4"><span class="name">邮箱</span><span class="icon"><i
													class="iconfont icon-icon_message_centre"></i></span></el-menu-item>
										<el-menu-item index="5"><span class="name">帮助中心</span><span class="icon"><i
													class="iconfont icon-icon_help_centre"></i></span></el-menu-item>
										<el-menu-item index="6"><span class="name">清除缓存</span><span class="icon"><i
													class="iconfont icon-icon_refresh_gold_16"></i></span>
										</el-menu-item>
										<el-menu-item index="7"><span>登出</span></el-menu-item>
									</el-submenu>
								</el-menu>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="nav-main">
				<div class="logBox"><img src="../assets/img/logo.png" alt=""></div>
				<div class="routerGroup">
					<el-menu background-color="#34248b" text-color="#90a2dc" active-text-color="#e9cfa4" :default-active="$route.path" :router="true" class="el-navbar" mode="horizontal" @select="handleSelect">
						<el-menu-item @mouseover.native="mouseOver('none')" index="/">主页</el-menu-item>
						<el-menu-item @mouseover.native="mouseOver('cp')" index="/Lottery">彩票</el-menu-item>
						<el-menu-item @mouseover.native="mouseOver('none')" index="/live">网上赌场</el-menu-item>
						<el-menu-item @mouseover.native="mouseOver('cp2','bz')" index="/slot">爆炸罐</el-menu-item>
						<el-menu-item @mouseover.native="mouseOver('cp2','yd')" index="/sports">运动</el-menu-item>
						<el-menu-item @mouseover.native="mouseOver('none')" index="/fish">射鱼</el-menu-item>
						<el-menu-item @mouseover.native="mouseOver('none')" index="/Discount">赋予</el-menu-item>
					</el-menu>
				</div>
			</div>
		</div>
		<!-- 下拉 -->
		<div class="realGamer" v-show="xiala == 'cp2'" @mouseleave="mouseLeave()">
			<ul v-show="xiala2 == 'bz'" v-for="(item,index) in dropmenulist" :key="index">
				<li class="gameItem" >
					<div class="cover"><span>开始玩</span></div>
					<p class="line"></p>
					<div class="name">
						<p>{{item.title}}</p>
					</div>
					<div class="img"><img :src="item.pic" alt=""></div>
				</li>
			</ul>
			<ul v-show="xiala2 == 'yd'" v-for="(item,index) in dropmenulist2" :key="index">
				<li class="gameItem">
					<div class="cover"><span>开始玩</span></div>
					<p class="line"></p>
					<div class="name">
						<p>{{item.title}}</p>
					</div>
					<div class="img"><img :src="item.pic" alt=""></div>
				</li>
			</ul>
		</div>
		<div class="allGamer" v-show="xiala == 'cp'" >
			<ul class="allLottery" @mouseleave="mouseLeave()">
				<li class="lotteryItem">
					<ul class="lotteryList">
						<li class="title">
							<div class="lables">
								<span class="lable lableName">北</span>
								<img src="../assets/img/right_allow1.png" alt="" class="right_allow">
							</div>
						</li>
						<li class="item"><span class="menu-name">北</span></li>
						<li class="item"><span class="menu-name">贵宾 5 分钟</span></li>
						<li class="item"><span class="menu-name selectId">北方贵宾 3 分钟</span></li>
						<li class="item"><span class="menu-name">北方贵宾 45 秒</span></li>
						<li class="item"><span class="menu-name">北方贵宾 75 秒</span></li>
						<li class="item"><span class="menu-name">北方贵宾 2 分钟</span></li>
					</ul>
				</li>
				<li class="lotteryItem isNam ">
					<ul class="lotteryList">
						<li class="title">
							<div class="lables">
								<span class="lable lableName">南方</span>
								<img src="../assets/img/right_allow1.png" alt="" class="right_allow">
							</div>
							<div class="filters">
								<div class="weekFilters">
									<el-dropdown trigger="click">
										<div class="dropdownTitle">
											<span>周一</span><i class="el-icon-caret-bottom"></i>
										</div>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item>全部的</el-dropdown-item>
											<el-dropdown-item>星期日</el-dropdown-item>
											<el-dropdown-item>周一</el-dropdown-item>
											<el-dropdown-item>周二</el-dropdown-item>
											<el-dropdown-item>第四名</el-dropdown-item>
											<el-dropdown-item>周四</el-dropdown-item>
											<el-dropdown-item>星期五</el-dropdown-item>
											<el-dropdown-item>周六</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
						</li>
						<li class="item"><span class="menu-name">贵宾 5 分钟</span></li>
						<li class="item"><span class="menu-name selectId">田江</span></li>
						<li class="item"><span class="menu-name">坚江</span></li>
						<li class="item"><span class="menu-name">大叻</span></li>
					</ul>
				</li>
				<li class="lotteryItem isNam ">
					<ul class="lotteryList">
						<li class="title">
							<div class="lables">
								<span class="lable lableName">中央区域</span>
								<img src="../assets/img/right_allow1.png" alt="" class="right_allow">
							</div>
							<div class="filters">
								<div class="weekFilters">
									<el-dropdown trigger="click">
										<div class="dropdownTitle">
											<span>周一</span><i class="el-icon-caret-bottom"></i>
										</div>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item>全部的</el-dropdown-item>
											<el-dropdown-item>星期日</el-dropdown-item>
											<el-dropdown-item>周一</el-dropdown-item>
											<el-dropdown-item>周二</el-dropdown-item>
											<el-dropdown-item>第四名</el-dropdown-item>
											<el-dropdown-item>周四</el-dropdown-item>
											<el-dropdown-item>星期五</el-dropdown-item>
											<el-dropdown-item>周六</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
						</li>
						<li class="item"><span class="menu-name">安抚</span></li>
						<li class="item"><span class="menu-name">广治</span></li>
						<li class="item"><span class="menu-name selectId">广平</span></li>
					</ul>
				</li>
				<li class="lotteryItem">
					<ul class="lotteryList">
						<li class="title">
							<div class="lables">
								<span class="lable lableName">贵宾彩票</span>
								<img src="../assets/img/right_allow1.png" alt="" class="right_allow">
							</div>
						</li>
						<li class="item"><span class="menu-name">胡志明贵宾</span></li>
						<li class="item"><span class="menu-name">河内贵宾</span></li>
					</ul>
				</li>
				<li class="lotteryItem">
					<ul class="lotteryList">
						<li class="title">
							<div class="lables">
								<span class="lable lableName">超级 6/45</span>
								<img src="../assets/img/right_allow1.png" alt="" class="right_allow">
							</div>
						</li>
						<li class="item"><span class="menu-name">超级 6/45 1 分钟</span></li>
					</ul>
				</li>
				<li class="lotteryItem">
					<ul class="lotteryList">
						<li class="title">
							<div class="lables">
								<span class="lable lableName">基诺</span>
								<img src="../assets/img/right_allow1.png" alt="" class="right_allow">
							</div>
						</li>
						<li class="item"><span class="menu-name">基诺 VIP 20 秒</span></li>
						<li class="item"><span class="menu-name">基诺 VIP 30 秒</span></li>
						<li class="item"><span class="menu-name selectId">基诺 VIP 40 秒</span></li>
						<li class="item"><span class="menu-name">基诺 VIP 50 秒</span></li>
						<li class="item"><span class="menu-name">1分钟VIP基诺</span></li>
						<li class="item"><span class="menu-name">基诺贵宾 5 分钟</span></li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 登录注册  弹窗 -->
		<div class="login">
			<el-dialog title="登录" :visible.sync="dialogLogin"  custom-class="vnDialog" width="440px">
				<div class="formContainer">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top"  class="vnForm">
						<el-form-item label="账户" prop="user">
							<el-input v-model="ruleForm.user"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="pwd">
							<el-input v-model="ruleForm.pwd"></el-input>
						</el-form-item>
						<div class="item-end_flex">
							<el-checkbox v-model="checked">记住密码</el-checkbox>
							<div class="item-link">忘记密码</div>
						</div>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button class="el-btn-submit" type="primary" @click="submitForm('ruleForm')">登录</el-button>
						<el-button class="el-btn-solid">登记</el-button>
						<el-button class="el-btn-solid">试试看</el-button>
					</div>
				</div>
			</el-dialog>
		</div>
		<div class="login">
			<el-dialog title="注册" :visible.sync="dialogRegist"  custom-class="vnDialog" width="440px">
				<div class="formContainer">
					<el-form :model="registForm" :rules="registrules" ref="registForm" label-position="top"  class="vnForm">
						<el-form-item label="账户" prop="user">
							<el-input v-model="ruleForm.user"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="pwd">
							<el-input v-model="ruleForm.pwd"></el-input>
						</el-form-item>
						<el-form-item label="确认密码" prop="repwd">
							<el-input v-model="ruleForm.repwd"></el-input>
						</el-form-item>
						<el-form-item label="电话号码" prop="tel">
							<el-input v-model="ruleForm.tel"></el-input>
						</el-form-item>
						<el-form-item label="全名" prop="rename">
							<el-input v-model="ruleForm.rename"></el-input>
						</el-form-item>
						<div class="item-end_flex">
							<el-checkbox v-model="checked">我已年满 18 岁，已阅读并同意投注规则</el-checkbox>
						</div>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button class="el-btn-submit" type="primary" @click="resgitForm('registForm')">登录</el-button>
					</div>
				</div>
			</el-dialog>
		</div>
		<!-- 聊天室 -->
		<div class="vdr dragDialog inactive " v-if="dragDialogShow" style="z-index: auto; top: 120px; left: 1320px;">
			<div class="content-container" style="width: 200px; height: 200px;">
				<div class="dragHeader dragHandle" data-drag-handle="102">
					<div ><i class="iconfont icon-icon_nav_chatroom_nor leftI"></i><span >Phòng chat</span></div>
					<div @click="dragDialogShow = false"><i class="iconfont icon-icon_customer_service leftI serviceI"></i><i class="iconfont icon-icon_close_dark closeI"></i></div>
				</div>
				<div class="notice">
					<div class="noticeBar wrap content">
						<div class="icon"><i class="iconfont icon-icon_announcement "></i><span >Thông báo:</span>
						</div>
						<div class="noticeItems">
							<div class="items">
								<div class="text" style="animation-duration: 261.75s;">
									<span >CẢNH BÁO LỪA ĐẢO NẠP TIỀN.Hiện tại có 1 số thành phần giả
										danh nhân viên XOSO BET CASINO LỪA ĐẢO về NẠP TIỀN để tránh phát sinh không mong
										muốn, quý hội viên lưu ý KHÔNG CUNG CẤP THÔNG TIN CÁ NHÂN cũng như các HÌNH ẢNH
										BIÊN LAI CHI TIẾT GIAO DỊCH cho bất kỳ ai. Khi nạp tiền không thành công vui
										lòng liên hệ CSKH ngay trên link xosobet1.com, xosobet2.com, xosobet3.com,
										xosobet4.com, xosobet5.com. Nếu có vấn đề xảy ra dẫn tới tình trạng tổn thất vể
										tiền bạc XOSO BET CASINO hoàn toàn không chịu trách nhiệm. Mọi thông tin chi
										tiết vui lòng liên hệ CSKH trực tuyến 24/7LƯU Ý NẠP TIỀNNhằm nâng cao tốc độ
										phục vụ tất cả các Thành viên trong việc Nạp Tiền , XOSO BET Casino xin lưu ý
										đến tất cả các Thành viên khi chuyển tiền vào các ngân hàng của XOSO BET Casnio
										vui lòng sử dụng nội dung chuyển tiền là TÊN ĐĂNG NHẬP hoặc HỌ VÀ TÊN để bộ phận
										liên quan có thể xác nhận một cách chính xác và rõ ràng hơn để tránh tình trạng
										lệnh nạp tiền thất bại ! Chân thành cảm ơn sự hợp tác của tất cả các Thành viên
										. Mọi chi tiết xin liên hệ CSKH 24/7 !</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="body">
					<p class="loadMoreMessage"><span >Tải thêm tin </span></p>
					<ul style="">
						<li v-for="item in 20" :key="item">
							<div class="chatLogItem">
								<div class="msgItem">
									<div class="avatar"><img  src="../assets/img/touxiang.png" class="avatar"></div>
									<div class="msgContent">
										<div class="nameImg"><span>k***7</span><img src="../assets/img/vip.png" alt=""></div>
										<div class="message">立西你去</div>
										<p class="time"> 20:32:17 </p>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="footer">
					<div class="nav">
						<span >Hiển thị đơn cược của tôi</span>
						<el-switch
						v-model="sw1"
						width="30"
						active-color="#13ce66">
						</el-switch>
						<span>Chặn tất cả đơn cược</span>
						<el-switch
						v-model="sw2"
						width="30"
						active-color="#13ce66">
						</el-switch>
					</div>
					<div class="chatInput"><span class="sendPic"><span class="commonIcon iconfont icon-icon_send_photo"></span></span>
						<div class="inputWrap">
							<div class="el-textarea"><textarea autocomplete="off" rows="2" maxlength="255" placeholder="Nhập nội dung chat tại đây..." class="el-textarea__inner" style="resize: none; min-height: 33px;"></textarea>
							</div><span >
								<div role="tooltip" id="el-popover-6652" aria-hidden="true" class="el-popover el-popper" tabindex="0" style="display: none;">
									<div class="emojiContent">
										<div class="emoji"><span
												class="item"> 😀 </span><span data-v-32624cad=""
												class="item"> 😆 </span><span class="item"> 😅
											</span><span class="item"> 🤣 </span><span
												class="item"> 😂 </span><span data-v-32624cad=""
												class="item"> 🙃 </span><span class="item"> 😉
											</span><span class="item"> 😊 </span><span
												class="item"> 😇 </span><span data-v-32624cad=""
												class="item"> 🥰 </span><span class="item"> 😍
											</span><span class="item"> 🤩 </span><span
												class="item"> 😘 </span><span data-v-32624cad=""
												class="item"> 😚 </span><span class="item"> 😋
											</span><span class="item"> 😜 </span><span
												class="item"> 🤪 </span><span data-v-32624cad=""
												class="item"> 🤑 </span><span class="item"> 🤗
											</span><span class="item"> 🤔 </span><span
												class="item"> 😑 </span><span data-v-32624cad=""
												class="item"> 😏 </span><span class="item"> 😒
											</span><span class="item"> 🙄 </span><span
												class="item"> 😬 </span><span data-v-32624cad=""
												class="item"> 😴 </span><span class="item"> 🥶
											</span><span class="item"> 😵 </span><span
												class="item"> 🤠 </span><span data-v-32624cad=""
												class="item"> 🥳 </span><span class="item"> 😎
											</span><span class="item"> 😳 </span><span
												class="item"> 😭 </span><span data-v-32624cad=""
												class="item"> 😱 </span><span class="item"> 😤
											</span></div>
									</div>
								</div><span class="el-popover__reference-wrapper"><i  class="iconfont icon-icon_send_emoji el-popover__reference" aria-describedby="el-popover-6652" tabindex="0"></i></span>
							</span>
						</div><span class="sendMsg"> Gửi </span>
						<div class="iconBox">
							<input type="file" accept="image/*" style="display: none;">
						</div>
					</div>
					<div class="goBottomDiv" style=""><i class="iconfont icon-icon_get_back"></i></div>
				</div>
				<div class="redBagFix" style="display: none;">
					<div class="redWrap"><img src="/home/static/img/redBag3.ac8a1017.png" alt="" class="redBag3">
						<p class="redBagP">Nhận lì xì miễn phí</p>
						<div class="openBtn"><span > Mở </span><img src="/home/static/img/img_open_bottom.a7fe6212.png" alt="" class="redBag2"></div>
						<div class="ball"><i class="iconfont icon-icon_floatbar_close"></i></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Head',
		data() {
			return {
				isLogin: false,
				activeIndex: '1',
				// 登录注册
				dialogLogin: false,
				dialogRegist: false,
				checked:true,
				ruleForm: {
					user: '',
					pwd: '',
				},
				registForm: {
					user: '',
					pwd: '',
					repwd: '',
					tel: '',
					rename: '',
				},
				rules: {
					user: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
					],
					pwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				registrules: {
					user: [{required: true,message: '请输入用户名',trigger: 'blur'},],
					pwd: [{required: true,message: '请输入密码',trigger: 'blur'},],
					repwd: [{required: true,message: '请输入确认密码',trigger: 'blur'},],
					tel: [{required: true,message: '请输入电话号',trigger: 'blur'},],
					rename: [{required: true,message: '请输入姓名',trigger: 'blur'},],
				},
				// nav
				dropmenulist: [{
						title: 'AG体育',
						pic: require('../assets/img/live_wmlive_nav.png')
					},
					{
						title: '运动BBIN',
						pic: require('../assets/img/live_mglive_nav.png')
					},
					{
						title: '体育书籍',
						pic: require('../assets/img/live_aglive_nav.png')
					},
					{
						title: '虚拟体育',
						pic: require('../assets/img/live_bbinlive_nav.png')
					},
					{
						title: 'SBO赌场',
						pic: require('../assets/img/live_sbolive_nav.png')
					},
					{
						title: 'AE 性感的 现实',
						pic: require('../assets/img/live_aelive_nav.png')
					},
				],
				dropmenulist2: [{
						title: 'AG体育',
						pic: require('../assets/img/sports_agsports_nav.png')
					},
					{
						title: '运动BBIN',
						pic: require('../assets/img/sports_bbinsports_nav.png')
					},
					{
						title: '体育书籍',
						pic: require('../assets/img/sports_sportsbook_nav.png')
					},
					{
						title: '虚拟体育',
						pic: require('../assets/img/sports_virtualsports_nav.png')
					},
				],
				// switch
				sw1:'',
				sw2:'',
				// 对话
				dragDialogShow:false,
				xiala:'',
				xiala2:'',
			};
		},
		methods: {
			mouseOver(e,b){
				this.xiala = e
				this.xiala2 = b
			},
			mouseLeave(){
				console.log('sssss')
				this.xiala = 'a'
				this.xiala2 = 'a'
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resgitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style type="text/css">
	.el-navbar {
		height: 72px;
	}

	.el-navbar {
		border-bottom: 0 !important;
	}

	.el-menu--horizontal.el-navbar>.el-menu-item {
		height: 71px;
		line-height: 70px;
		width: 80px;
		margin: 0 20px;
		text-align: center;
	}
</style>
